div.uno {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: animacionUno;
  animation-duration: 4s;
}

@keyframes animacionUno {
  from {
    background-color: red;
  }
  to {
    background-color: yellow;
  }
}

div.dos {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: animacionDos;
  animation-duration: 4s;
}

@keyframes animacionDos {
  0% {
    background-color: rgb(89, 201, 75);
  }
  25% {
    background-color: rgb(97, 9, 92);
  }
  50% {
    background-color: rgb(19, 104, 107);
  }
  100% {
    background-color: rgb(91, 97, 9);
  }
}

div.tres {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: animaciontres;
  animation-duration: 4s;
  animation-delay: 2s;
}

@keyframes animaciontres {
  0% {
    background-color: red;
    left: 0px;
    top: 0px;
  }
  25% {
    background-color: rgb(219, 218, 255);
    left: 200px;
    top: 0px;
  }
  50% {
    background-color: rgb(114, 114, 236);
    left: 200px;
    top: 200px;
  }
  75% {
    background-color: rgb(255, 62, 229);
    left: 0px;
    top: 200px;
  }
  100% {
    background-color: rgb(233, 255, 134);
    left: 0px;
    top: 0px;
  }
}

div.cuatro {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: animacioncuatro;
  animation-duration: 4s;
  animation-direction: reverse;
}

@keyframes animacioncuatro {
  0% {
    background-color: red;
    left: 0px;
    top: 0px;
  }
  25% {
    background-color: yellow;
    left: 200px;
    top: 0px;
  }
  50% {
    background-color: blue;
    left: 200px;
    top: 200px;
  }
  75% {
    background-color: green;
    left: 0px;
    top: 200px;
  }
  100% {
    background-color: red;
    left: 0px;
    top: 0px;
  }
}
div.cinco {
  width: 100px;
  height: 50px;
  background-color: rgb(221, 175, 175);
  font-weight: bold;
  position: relative;
  animation: mymove 5s;
  animation-fill-mode: forwards;
}

#div1 {
  animation-timing-function: linear;
}
#div2 {
  animation-timing-function: ease;
}
#div3 {
  animation-timing-function: ease-in;
}
#div4 {
  animation-timing-function: ease-out;
}
#div5 {
  animation-timing-function: ease-in-out;
}

@keyframes mymove {
  from {
    left: 0px;
  }
  to {
    left: 300px;
  }
}
div.seis {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: examplee;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

@keyframes examplee {
  from {
    top: 0px;
  }
  to {
    top: 200px;
    background-color: blue;
  }
}

div.siete {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: exampleee;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes exampleee {
  0% {
    background-color: red;
    left: 0px;
    top: 0px;
  }
  25% {
    background-color: yellow;
    left: 200px;
    top: 0px;
  }
  50% {
    background-color: blue;
    left: 200px;
    top: 200px;
  }
  75% {
    background-color: green;
    left: 0px;
    top: 200px;
  }
  100% {
    background-color: red;
    left: 0px;
    top: 0px;
  }
}
